<template>
  <!-- 友链 -->
  <div class="friend">
    <div class="main">
      <div class="header">
        <el-form :inline="true">
          <el-form-item label="昵称">
            <el-input placeholder="请输入关键字" v-model="pageQuery.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="pageQuery.status">
              <el-option label="通过" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="find">查询</el-button>
            <el-button @click="replace">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deleteBatchFriends">
              <el-icon><Minus /></el-icon>
              <span>批量删除</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body">
        <el-table :data="friendList" @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="头像" width="70">
            <template #default="scope">
              <el-avatar :src="scope.row.headerUrl"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column label="昵称" prop="name" width="55"></el-table-column>
          <el-table-column label="邮箱" prop="email"></el-table-column>
          <el-table-column label="描述" prop="desc"></el-table-column>
          <el-table-column label="网站链接" prop="blogUrl"></el-table-column>
          <el-table-column label="状态" width="55">
            <template #default="scope">
              <span
                :class="scope.row.status === 0 ? 'blue' : 'red'"
                @click="updtaeStatus(scope.row.id, scope.row.status === 0 ? 1 : 0)"
                >{{ scope.row.status === 0 ? '通过' : '禁用' }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="申请时间"
            prop="createTime"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="修改时间"
            prop="updateTime"
            width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button
                :text="true"
                size="small"
                type="primary"
                @click="getApplyDetail(scope.row.id)"
              >
                查看
              </el-button>
              <el-button :text="true" size="small" type="danger" @click="deleteById(scope.row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          v-model:urrent-page="pageQuery.page"
          v-model:page-size="pageQuery.pageSize"
          @current-change="handlePageChange"
          @size-change="handlePageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <el-dialog v-model="passHide" width="500">
      <el-form>
        <el-form-item label="寄语">
          <el-input
            type="textarea"
            placeholder="请输入你想对他说的话"
            maxlength="100"
            show-word-limit
            v-model="sendWord"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="passFriend(1)">确定</el-button>
          <el-button type="danger" @click="passFriend(0)">驳回</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="applyDetailHide" width="700">
      <el-descriptions title="详情" border direction="vertical">
        <el-descriptions-item :rowspan="2" :width="140" label="头像" align="center">
          <el-image style="width: 100px; height: 100px" :src="friendDetail.headerUrl" />
        </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ friendDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ friendDetail.email }}</el-descriptions-item>
        <el-descriptions-item label="博客链接">
          {{ friendDetail.blogUrl }}
        </el-descriptions-item>
        <el-descriptions-item label="申请时间">
          {{ friendDetail.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="博客描述">
          {{ friendDetail.desc }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  checkApplyFriendService,
  deleteBatchFriendsService,
  getFriendDetailByIdService,
  getFriendListService,
} from '@/api/Friend'
import { onMounted, ref } from 'vue'
import { Minus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const friendList = ref([{}])

const friendIds = ref([])
/**
 * 根据id删除友链
 * @param id
 */
const deleteById = (id) => {
  ElMessageBox.confirm('你确认删除这条友链吗?', 'Warning', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    friendIds.value.push(id)
    deleteBatchFriendsService(friendIds.value).then(() => {
      friendIds.value = friendIds.value.filter((item) => item.id === id)
      getFriendList(pageQuery.value)
    })
  })
}
/**
 * 批量删除友链
 * @param row
 */
const handleSelectionChange = (row) => {
  const obj = JSON.parse(JSON.stringify(row))
  friendIds.value = []
  obj.forEach((item) => {
    friendIds.value.push(item.id)
  })
}
const deleteBatchFriends = () => {
  if (friendIds.value.length === 0) {
    ElMessage.error('未选中任何数据')
    return false
  }
  ElMessageBox.confirm(`你确认删除这${friendIds.value.length}条数据吗?`, 'Warning', {
    type: 'warning',
    cancelButtonText: '取消',
    confirmButtonText: '确认',
  }).then(() => {
    deleteBatchFriendsService(friendIds.value).then(() => {
      friendIds.value = []
      getFriendList(pageQuery.value)
    })
  })
}

/**
 * 分页参数
 */
const total = ref(0)
const pageQuery = ref({
  page: 1,
  pageSize: 9,
  name: '',
  status: null,
})

/**
 * 查看友链详情
 */
const friendDetail = ref({})
const applyDetailHide = ref(false)
const getApplyDetail = async (id) => {
  applyDetailHide.value = true
  const { data } = await getFriendDetailByIdService(id)
  friendDetail.value = data
}

/**
 * 修改状态
 * @param id
 * @param status
 */
const passHide = ref(false)
const sendWord = ref('')
const passWordQuery = ref({
  id: '',
  status: null,
  sendWord: '',
})
const updtaeStatus = (id, status) => {
  passHide.value = true
  passWordQuery.value.id = id
}
// 通过友链
const passFriend = (status) => {
  if (sendWord.value === '') {
    ElMessage.error('寄语不能为空')
    return false
  }
  passWordQuery.value.sendWord = sendWord.value
  passWordQuery.value.status = status
  console.log(passWordQuery.value)
  checkApplyFriendService(passWordQuery.value).then(() => {
    passHide.value = false
    getFriendList(pageQuery.value)
  })
}

/**
 * 分页查询
 * @param page
 */
const handlePageChange = (page) => {}
const handlePageSizeChange = (pageSize) => {}

/**
 * 查询
 */
const find = () => {
  getFriendList(pageQuery.value)
}
const replace = () => {
  pageQuery.value.name = ''
  pageQuery.value.status = null
  getFriendList(pageQuery.value)
}

/**
 * 获取友链列表
 * @param query
 */
const getFriendList = async (query) => {
  const { data } = await getFriendListService(query)
  total.value = data.total
  friendList.value = data.records
}

onMounted(() => {
  getFriendList(pageQuery.value)
})
</script>

<style lang="scss" scoped>
.friend {
  padding: 15px;
  background-color: #f3f4f5;

  .main {
    padding: 20px;
    min-height: 100vh;
    background-color: #fff;
    border-radius: 7px;

    .header {
      :deep(.el-select__wrapper) {
        width: 150px;
      }
    }

    .page {
      margin-top: 20px;
      display: flex;
      justify-self: center;
    }
  }
}

.blue {
  cursor: pointer;
  color: #37b4fd;
}
.red {
  cursor: pointer;
  color: red;
}
::v-deep.el-table .cell {
  text-align: center !important;
}
</style>